<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS3动画</title>
		<style type="text/css">
			.main{
				position:absolute;
				/*border: 1px solid;*/
				width: 250px;
				height: 250px;
				top: 0px;
				left: 0px;
				-webkit-transition: top 1s,left 1s;
			}
			.main:hover{
				top:100px;
				left: 100px;
			}
			.main1{
				position: absolute;
				/*border: 1px solid;*/
				width: 250px;
				height: 250px;
				left: 300px;
				top: 0px;
				-webkit-transition: top 2s,left 2s;
			}
			.main1:hover{
				top:100px;
				left: 350px;
			}
			.main2{
				position: absolute;
				/*border: 1px solid;*/
				width: 250px;
				height: 250px;
				left: 600px;
				top: 0px;
				-webkit-transition: top 2s,left 2s;
			}
			.main2:hover{
				top:100px;
				left: 650px;
			}
			div{
				position: absolute;
				background-color: rgba(102,101,102,0.5);
				border: 1px solid black;
				color: white;
				text-align: center;
				font-size: 40px;
			}
			#div1{
				top: 150px;
				left: 150px;
				width: 100px;
				height: 100px;
				line-height: 100px;
				-webkit-transition:-webkit-transform 3s;
			}
			#div1:hover{
				-webkit-transform: rotate(360deg);
				background-color: darkblue;
			}
		    #div3{
				top: 80px;
				left: 27px;
				width: 100px;
				height: 100px;
				line-height: 100px;
				-webkit-transition:-webkit-transform 2s,top 2s,left 2s,width 2s,height 2s;
			}
			#div3:hover{
				-webkit-transform: rotate(360deg);
				width:100px;
				height: 100px;
				top: 150px;
				left: 150px;
				background-color: darkblue;
				z-index: 1;
			}
			#div2{
				top: 115px;
				left: 28px;
				width: 120px;
				height: 100px;
				line-height: 100px;
				-webkit-transform: skew(0deg,30deg);
				-webkit-transition:-webkit-transform 2s,top 2s,left 2s,width 2s,height 2s;
			}
			#div2:hover{
				-webkit-transform: rotate(360deg);
				width:100px;
				height: 100px;
				top: 150px;
				left: 150px;
				background-color: darkblue;
				z-index: 1;
			}
			#div4{
				top: 115px;
				left: 129px;
				width: 120px;
				height: 100px;
				line-height: 100px;
				-webkit-transform: skew(0deg,30deg);
				-webkit-transition:-webkit-transform 2s,top 2s,left 2s,width 2s,height 2s;
			}
			#div4:hover{
				-webkit-transform: rotate(360deg);
				width:100px;
				height: 100px;
				top: 150px;
				left: 150px;
				background-color: darkblue;
				z-index: 1;
			}
			#div5{
				top: 80px;
				left: 89px;
				width: 100px;
				height: 70px;
				line-height: 70px;
				-webkit-transform: skew(60deg,0deg);
				-webkit-transition:-webkit-transform 2s,top 2s,left 2s,width 2s,height 2s;
			}
			#div5:hover{
				-webkit-transform: rotate(360deg);
				width:100px;
				height: 100px;
				top: 150px;
				left: 150px;
				background-color: darkblue;
				z-index: 1;
			}
			#div6{
				top: 180px;
				left: 88px;
				width: 100px;
				height: 70px;
				line-height: 70px;
				-webkit-transform: skew(60deg,0deg);
				-webkit-transition:-webkit-transform 2s,top 2s,left 2s,width 2s,height 2s;
			}
			#div6:hover{
				-webkit-transform: rotate(360deg);
				width:100px;
				height: 100px;
				top: 150px;
				left: 150px;
				background-color: darkblue;
				z-index: 1;
			}
		</style>
	</head>
	<body>
		<article class="main">
			<div id="div6">6</div>
			<div id="div3">3</div>
			<div id="div2">2</div>
			<div id="div4">4</div>
			<div id="div1">1</div>
			<div id="div5">5</div>
		</article>
		<article class="main1">
			<div id="div6">6</div>
			<div id="div3">3</div>
			<div id="div2">2</div>
			<div id="div4">4</div>
			<div id="div1">1</div>
			<div id="div5">5</div>
		</article>
		<article class="main2">
			<div id="div6">6</div>
			<div id="div3">3</div>
			<div id="div2">2</div>
			<div id="div4">4</div>
			<div id="div1">1</div>
			<div id="div5">5</div>
		</article>
	</body>
</html>
